<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社区论坛 - 绝区零社区</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/forum.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="logo">
                <img src="images/logo.png" alt="绝区零社区">
                <span>绝区零社区</span>
            </div>
            <div class="nav-links">
                <a href="home.html">首页</a>
                <a href="#">攻略中心</a>
                <a href="#">角色图鉴</a>
                <a href="forum.html" class="active">社区论坛</a>
                <a href="agentvotes.html">角色排行</a>
            </div>
            <div class="nav-right">
                <div class="search-box">
                    <input type="text" placeholder="搜索帖子...">
                    <button><i class="fas fa-search"></i></button>
                </div>
                <div class="user-profile">
                    <div class="user-avatar">
                        <img src="images/avatar1.png" alt="用户头像">
                        <div class="user-dropdown">
                            <div class="dropdown-header">
                                <img src="images/avatar1.png" alt="用户头像">
                                <div class="user-info">
                                    <h4>用户名</h4>
                                    <p>UID: 12345678</p>
                                </div>
                            </div>
                            <ul class="dropdown-menu">
                                <li><a href="dashboard.html"><i class="fas fa-user"></i> 个人主页</a></li>
                                <li><a href="javascript:void(0)" class="bind-game-account"><i class="fas fa-gamepad"></i> 绑定游戏账号</a></li>
                                <li><a href="#"><i class="fas fa-cog"></i> 账号设置</a></li>
                                <li><a href="#" class="logout-btn"><i class="fas fa-sign-out-alt"></i> 退出登录</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="forum-container">
        <!-- 论坛头部 -->
        <section class="forum-header">
            <div class="header-content">
                <h1><i class="fas fa-comments"></i> 社区论坛</h1>
                <p>与其他玩家分享攻略、讨论游戏内容、交流心得</p>
            </div>
        </section>

        <!-- 筛选区域 -->
        <section class="filter-section">
            <div class="filter-container">
                <!-- 搜索功能 -->
                <div class="search-container">
                    <div class="search-box">
                        <input type="text" id="search-input" placeholder="搜索帖子标题或内容...">
                        <button id="search-btn" class="search-btn">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                    <div class="search-options">
                        <label class="search-option">
                            <input type="checkbox" id="search-title" checked>
                            <span>搜索标题</span>
                        </label>
                        <label class="search-option">
                            <input type="checkbox" id="search-content" checked>
                            <span>搜索内容</span>
                        </label>
                    </div>
                </div>
                
                <!-- 筛选选项 -->
                <div class="filter-options">
                    <div class="filter-group">
                        <label>排序方式：</label>
                        <select id="sort-select">
                            <option value="latest">最新发布</option>
                            <option value="hot">最热门</option>
                            <option value="comments">最多评论</option>
                            <option value="likes">最多点赞</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label>帖子类型：</label>
                        <select id="type-select">
                            <option value="all">全部</option>
                            <option value="攻略">攻略</option>
                            <option value="讨论">讨论</option>
                            <option value="视频">视频</option>
                            <option value="资讯">资讯</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label>分类：</label>
                        <select id="category-select">
                            <option value="all">全部</option>
                            <option value="角色">角色</option>
                            <option value="装备">装备</option>
                            <option value="副本">副本</option>
                            <option value="剧情">剧情</option>
                        </select>
                    </div>
                    <button class="new-post-btn" onclick="window.location.href='create-post.html'"><i class="fas fa-plus"></i> 发布新帖</button>
                </div>
            </div>
        </section>

        <!-- 帖子列表 -->
        <section class="post-list">
            <!-- 帖子卡片示例1 -->
            <article class="post-card">
                <div class="post-header">
                    <div class="post-type">
                        <span class="type-badge guide">攻略</span>
                    </div>
                    <h2 class="post-title">新角色「星火」培养指南</h2>
                </div>
                <div class="post-content">
                    <p class="post-preview">详细解析星火角色定位、配装与技能搭配，助你快速上手新角色。包含武器推荐、圣遗物搭配、队伍配置等全方位攻略...</p>
                    <div class="post-images">
                        <img src="images/guide1.jpg" alt="攻略图片">
                    </div>
                </div>
                <div class="post-footer">
                    <div class="post-meta">
                        <span class="author">
                            <img src="images/avatar1.png" alt="作者头像">
                            <span>攻略达人</span>
                        </span>
                        <span class="time"><i class="far fa-clock"></i> 2小时前</span>
                        <span class="views"><i class="far fa-eye"></i> 2.3k</span>
                        <span class="comments"><i class="far fa-comment"></i> 156</span>
                    </div>
                    <div class="post-actions">
                        <button class="like-btn" data-post-id="1">
                            <i class="far fa-heart"></i>
                            <span class="like-count">128</span>
                        </button>
                    </div>
                </div>
            </article>

            <!-- 帖子卡片示例2 -->
            <article class="post-card">
                <div class="post-header">
                    <div class="post-type">
                        <span class="type-badge discussion">讨论</span>
                    </div>
                    <h2 class="post-title">大家觉得新版本哪个角色最值得培养？</h2>
                </div>
                <div class="post-content">
                    <p class="post-preview">新版本更新后，很多角色都得到了加强。想听听大家的意见，在资源有限的情况下，优先培养哪个角色性价比最高？</p>
                </div>
                <div class="post-footer">
                    <div class="post-meta">
                        <span class="author">
                            <img src="images/avatar2.png" alt="作者头像">
                            <span>游戏玩家</span>
                        </span>
                        <span class="time"><i class="far fa-clock"></i> 4小时前</span>
                        <span class="views"><i class="far fa-eye"></i> 1.8k</span>
                        <span class="comments"><i class="far fa-comment"></i> 89</span>
                    </div>
                    <div class="post-actions">
                        <button class="like-btn" data-post-id="2">
                            <i class="far fa-heart"></i>
                            <span class="like-count">67</span>
                        </button>
                    </div>
                </div>
            </article>

            <!-- 帖子卡片示例3 -->
            <article class="post-card">
                <div class="post-header">
                    <div class="post-type">
                        <span class="type-badge news">资讯</span>
                    </div>
                    <h2 class="post-title">官方公告：下周将开启限时活动「星火燎原」</h2>
                </div>
                <div class="post-content">
                    <p class="post-preview">官方最新公告，下周将开启限时活动「星火燎原」，活动期间可获得限定角色、武器和大量奖励。活动详情请查看官方公告...</p>
                    <div class="post-images">
                        <img src="images/banner1.jpg" alt="活动图片">
                    </div>
                </div>
                <div class="post-footer">
                    <div class="post-meta">
                        <span class="author">
                            <img src="images/avatar3.png" alt="作者头像">
                            <span>官方资讯</span>
                        </span>
                        <span class="time"><i class="far fa-clock"></i> 6小时前</span>
                        <span class="views"><i class="far fa-eye"></i> 3.1k</span>
                        <span class="comments"><i class="far fa-comment"></i> 234</span>
                    </div>
                    <div class="post-actions">
                        <button class="like-btn" data-post-id="3">
                            <i class="far fa-heart"></i>
                            <span class="like-count">189</span>
                        </button>
                    </div>
                </div>
            </article>

            <!-- 帖子卡片示例4 -->
            <article class="post-card">
                <div class="post-header">
                    <div class="post-type">
                        <span class="type-badge video">视频</span>
                    </div>
                    <h2 class="post-title">【视频攻略】深渊12层满星通关演示</h2>
                </div>
                <div class="post-content">
                    <p class="post-preview">分享一个深渊12层满星通关的视频攻略，使用平民阵容，希望对大家有帮助。视频包含详细的角色配置和操作技巧...</p>
                    <div class="post-images">
                        <img src="images/banner2.jpg" alt="视频封面">
                        <div class="video-overlay">
                            <i class="fas fa-play"></i>
                        </div>
                    </div>
                </div>
                <div class="post-footer">
                    <div class="post-meta">
                        <span class="author">
                            <img src="images/avatar4.png" alt="作者头像">
                            <span>视频创作者</span>
                        </span>
                        <span class="time"><i class="far fa-clock"></i> 8小时前</span>
                        <span class="views"><i class="far fa-eye"></i> 1.5k</span>
                        <span class="comments"><i class="far fa-comment"></i> 76</span>
                    </div>
                    <div class="post-actions">
                        <button class="like-btn" data-post-id="4">
                            <i class="far fa-heart"></i>
                            <span class="like-count">92</span>
                        </button>
                    </div>
                </div>
            </article>
        </section>

        <!-- 分页 -->
        <div class="pagination">
            <button class="prev-page"><i class="fas fa-chevron-left"></i></button>
            <div class="page-numbers">
                <span class="active">1</span>
                <span>2</span>
                <span>3</span>
                <span>...</span>
                <span>10</span>
            </div>
            <button class="next-page"><i class="fas fa-chevron-right"></i></button>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-container">
            <div class="footer-section">
                <h4>关于我们</h4>
                <ul>
                    <li><a href="#">社区介绍</a></li>
                    <li><a href="#">加入我们</a></li>
                    <li><a href="#">联系方式</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h4>帮助中心</h4>
                <ul>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">意见反馈</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h4>关注我们</h4>
                <div class="social-links">
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-qq"></i></a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 绝区零社区 版权所有</p>
        </div>
    </footer>

    <script src="js/forum.js"></script>
</body>
</html> 